<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../static/js/jquery3.js"></script>
    <script type="text/javascript"></script>
    <style>
        body {
            font-family: Microsoft JhengHei;
        }

        label {
            font-weight: bold
        }

        .width {
            height: 110px;
            width: 500px;
            position: relative;
            left: 80px;
        }


        #btn_ok {
            background: linear-gradient(to right, #00B4F4, #0094D9);
            position: relative;
        }

        .yuan {
            border-radius: 10px
        }

        input::-webkit-input-placeholder {
            /* placeholder颜色 */
            color: #aab2bd;
            /* placeholder字体大小 */
            font-size: 8px;
        }

        textarea::-webkit-input-placeholder {
            /* placeholder颜色 */
            color: #aab2bd;
            /* placeholder字体大小 */
            font-size: 8px;
        }

    </style>
</head>
<body>
<form id="form_area" action="finish_amount_jf" method="get">
    <div class="container">
        <div class="row justify-content-center bg-light" style="height: 700px">
            <div class="align-self-center">
                <div class="row">
                    <h5 style="position: relative;left: 270px">缴费详情</h5>
                </div>
                <input type="hidden" id="amount_id" name="amount_id" th:value="${amount_id}">
                <input type="hidden" id="car_id" name="car_id" th:value="${car_id}">
                <input type="hidden" id="vip_state" name="vip_state" th:value="${vip_state}">
                <input type="hidden" id="login_telephone" name="login_telephone" th:value="${login_telephone}">
                <input type="hidden" th:if="${total_time} == 0" name="total_time" th:value="${total_time}">
                <div class="row ">
                    <div class="col-xl-8 width">
                        <label>车牌号码</label>
                        <input type="text" maxlength="11" class="form-control yuan" id="car_number"
                               name="car_number" th:value="${car_number}" readonly/>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-xl-8 width">
                        <label>手机号码</label>
                        <input type="text" maxlength="20" class="form-control yuan" id="owner_telephone"
                               name="owner_telephone" th:value="${owner_telephone}" readonly/>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-xl-8 width">
                        <label>入场时间</label>
                        <input type="text" maxlength="20" class="form-control yuan" id="start_time"
                               name="start_time" th:value="${start_time}"  readonly/>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-xl-8 width">
                        <label>出场时间</label>
                        <input type="text" maxlength="20" class="form-control yuan" id="end_time"
                               name="end_time" th:value="${end_time}"  readonly/>
                    </div>
                </div>
                <div class="row " th:if="${total_time} > 0">
                    <div class="col-xl-8 width">
                        <label>总时长(h)</label>
                        <input type="text" maxlength="20" class="form-control yuan" id="total_time"
                               name="total_time" th:value="${total_time}"  readonly/>
                    </div>
                </div>
                <div class="row " th:if="${total_time} > 0">
                    <div class="col-xl-8 width">
                        <label>待缴费用(元)</label>
                        <input type="text" maxlength="20" class="form-control yuan" id="pay_amount"
                               name="pay_amount" th:value="${pay_number}" style="color: red" readonly/>
                    </div>
                </div>
                <div class="row " th:if="${total_time} > 0">
                    <div class="col-xl-8 width">
                        <label>优惠券（限一张）：</label><select name="use_yhq" id="use_yhq" >
                        <option value="0">不使用</option>
                        <option th:each="yhq, itemStat:${yhqList}"
                                th:if="${yhq.yhq_bh} < ${total_time}"
                                th:value="${yhq.yhq_bh}"
                                th:text="${yhq.yhq_name}"></option>
                    </select>
                    </div>
                    <div class="row"><span style="color: red;font-size: 3px;position: relative;right: 360px;top: 25px">（温馨提示：使用后会在实际扣费中调整）</span></div>
                </div>
                <div class="row" th:if="${total_time} == 0">
                    <span style="color: red;position: relative;left: 120px">停车时间小于1小时，您无需缴费!</span>
                </div>
                <div class="row justify-content-center bg-light mt-3" id="btns">
                    <div class="col-xl-8 text-center">
                        <button class="btn" id="btn_ok" style="width: 250px;border-radius: 20px"><p
                                style="color: white;height: 10px">确认</p></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
</html>